<template>
	<view class="xb-page">
		<view class="xb-page-container">
			<form @submit="submitform">
				<view class="xb-form-cell-border">
					<view class="xb-list-cell-navigate xb-navigate-right">
						<view class="page-stuhead-title">学生头像</view>
						<uni-icon @click="selecthead" type="contact" size="30" color="#666666"></uni-icon>
					</view>
				</view>
				<view class="xb-form-cell-border">
					<input v-model="formdata.name" class="xb-input-white" placeholder-class="xb-input-placeholder" placeholder="请输入学员姓名" />
				</view>
				<view class="xb-form-cell-border">
					<input v-model="formdata.tel" class="xb-input-white" placeholder-class="xb-input-placeholder" placeholder="请输入联系方式" />
				</view>

				<view class="xb-page-section-title">性别</view>
				<view class="xb-seg-cell" style="width: 100%;">
					<view style="width: 70%">
						<SegmentedControl @clickItem="hadlesex" :values="sexs" :current="currentindex" activeColor="#0DC73A" styleType="button"></SegmentedControl>
					</view>
				</view>
				<view class="xb-form-cell-border">
					<picker class="xb-select" mode="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
						出生日期 {{formdata.birthday}}</picker>
				</view>

				<view class="xb-page-section-title">学生分类</view>
				<view class="xb-seg-cell" style="width: 100%;">
					<view style="width: 70%">
						<SegmentedControl @clickItem="handlecategory" :values="categorys" :current="currentindex" activeColor="#0DC73A" styleType="button"></SegmentedControl>
					</view>
				</view>
				<view class="xb-form-cell-border">
					<input class="xb-input-white" placeholder-class="xb-input-placeholder" placeholder="(选填)请填写学员编号" />
				</view>
				<view class="xb-form-cell-border">
					<textarea class="xb-textarea-white" placeholder-class="xb-input-placeholder" placeholder="(选填)填写备注" @blur="bindTextAreaBlur"></textarea>
				</view>
				<view class=" uni-flex uni-row xb-button-cell">
					<button form-type="submit"  class="xb-button" style="width: 100%;" plain="true" type="primary" size="mini">确认添加</button>
				</view>
				</form>
		</view>
	</view>

</template>

<script>
	import pageHead from '../../../components/page-head.vue'
	import SegmentedControl from '../../../components/segmented-control.vue'
	import uniIcon from '../../../components/uni-icon.vue'
	export default {
		data() {
			return {
				date: '2018-01-01',
				category: '',
				defaultcat: '2',
				sexs: ['男', '女'],
				categorys: ['在读', '试听'],
				formdata: {
					headurl: '',
					category:'',
					name: '',
					tel: '',
					sex: '',
					birthday: '',
					type: '',
					stuno: '',
					comments: '',
				},

				rbtns: [{
						name: '正式生',
						value: '1'
					},
					{
						name: '试听生',
						value: '2'
					}
				],
				title: 'ceshi'
			}
		},
		onLoad: function(option) {

		},
		methods: {
			handlecategory:function(v){
					this.formdata.category=v;
			},
			hadlesex:function(v){
				this.formdata.sex= v===0?'m':'f';
				
			},
			selecthead: function(e) {
				uni.chooseImage({
					success: function(imagespath) {
						formdata.headpath = imagespath.tempFilePaths;
					}
				})


			},
			bindDateChange: function(e) {
				this.date = e.detail.value;

			},
			submitform: function(e) {
				
				console.info(JSON.stringify(this.formdata))

// 				uni.uploadFile({
// 					url: '/stu/add',
// 					filePath: formdata.headpath,
// 					name: '',
// 					formdata: formdata,
// 					success: function(updatefiles) {
// 						uni.showToast({
// 							title: '添加成功',
// 							duration: 2000
// 						});
// 					},
// 					fail: function(updatefiles) {
// 						uni.showToast({
// 							title: '添加失败',
// 							duration: 2000
// 						});
// 					}
// 				})
// 
 			}
		},
		components: {
			pageHead,
			SegmentedControl,
			uniIcon,
		}

	}
</script>
<style scoped>
	@import "../../../common/uni.css";
	@import "../../../common/xb.css";

	.back-white-class {
		width: 100%;
		margin-left: 20px;
		margin-right: 20px;
	}

	.select_date {
		background-color: #EEEEEE;

	}



	.base-black-title {
		font-size: 30px;
		color: #000000;
	}

	.stu-page-section {
		margin-bottom: 20px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.add-stu-body {
		font-size: 30px;
		width: 100%;
	}

	.body-font {
		font-size: 30px;
		color: #BBBBBB;

	}

	.add-stu-input {
		margin-left: 10px;
		background-color: #EEEEEE;
		padding-left: 20px;
	}


	.uni-right-arraws {
		width: 60px;
		height: 60px;
	}

	.uni-head-select {
		position: absolute;
		right: 15%;
		top: 10%;
		height: 80px;
		width: 80px;
	}


	textarea {
		width: 700px;
		padding: 25px 0;
		height: 150px;
		line-height: 34px;
		font-size: 32px;
	}

	.textare {
		height: 102px;
	}

	.textarea-wrp {
		padding: 0 25px;
		background-color: #fff;
	}
</style>
